<template>
  <div class="bottom-nav">
    <van-tabbar v-model="active" route fixed placeholder safe-area-inset-bottom>
      <van-tabbar-item name="/" to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="/blog" to="/blog" icon="notes-o">博客</van-tabbar-item>
      <van-tabbar-item name="/message" to="/message" icon="chat-o">消息</van-tabbar-item>
      <van-tabbar-item name="/profile" to="/profile" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const active = ref('/')

// 根据当前路由设置激活的标签
const updateActiveTab = () => {
  const path = route.path
  
  if (path === '/') {
    active.value = '/'
  } else if (path.startsWith('/blog')) {
    active.value = '/blog'
  } else if (path.startsWith('/message')) {
    active.value = '/message'
  } else if (path.startsWith('/profile')) {
    active.value = '/profile'
  }
}

// 监听路由变化
watch(() => route.path, () => {
  updateActiveTab()
}, { immediate: true })

// 组件挂载时设置激活标签
onMounted(() => {
  updateActiveTab()
})
</script>

<style lang="scss" scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: var(--background-color-light);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}
</style> 